<template>
  <div>
    拦截器 在请求或响应被处理前拦截他们
    <p>请求拦截器</p>
    <p>响应拦截器</p>
  </div>
</template>

<script>
import axios from "axios";
import { config } from "vue/types/umd";
// Axios
export default {
  name: "3-3",
  created() {
    //请求拦截器
    axios.interceptors.request.use(
      (config) => {
        //   在发送请求前做些什么
        return config;
      },
      (err) => {
        // 请求错误时做些什么
        return promise.reject(err);
      }
    );
    // 响应拦截器
    axios.interceptors.response.use(
      (res) => {
        return res;
      },
      (err) => {
        // /响应错误
        return promise.reject(err);
      }
    );
    // 取消拦截器
    let interceptors = axios.interceptors.request.use((config) => {
      config.headers = {
        auth: true,
      };
      return config;
    });
    axios.interceptors.request.eject(interceptors);
    // 例子 登录状态（token: ""）
    // 需要登录的接口
    let instance = axios.created({});
    instance.interceptors.request.use((config) => {
      config.headers.token = "";
      return config;
    });
    // 不需要登录的接口
    let newInstance = axios.created({});

    // 移动端开发
    //   请求拦截
    let instance_phone = axios.created({});
    instance_phone.interceptors.request.use((config) => {
      //  请求前展示弹窗
      $("#modal").show();
      return config;
    });
    // 响应拦截
    instance_phone.interceptors.response.use((config) => {
      $("#modal").hide();
      return config;
    });
  },
};
</script>

<style>
</style>